<template>
  <div class="ele-body">
    <el-card shadow="never">
       <div class="block" style="font-size:16px;margin-bottom:10px;margin-left:5px">
          <span class="demonstration">项目详情     当前学校: {{schoolName}}</span>
       </div>
       
      <!-- 搜索表单 -->
      <el-form
        :model="where"
        label-width="77px"
        class="ele-form-search"
        @keyup.enter.native="reload"
        @submit.native.prevent>
        <el-row :gutter="15">
           <el-col :lg="6" :md="12">
            <el-form-item label="项目名称:">
              <el-select
                clearable
                v-model="where.project_id"
                placeholder="请选择项目"
                class="ele-fluid">
                  <el-option
                  v-for="item in projects"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
                </el-select>
            </el-form-item>
          </el-col>
            
                <el-col :lg="6" :md="12">
            <div class="ele-form-actions">
              <el-button
                type="primary"
                icon="el-icon-search"
                class="ele-btn-icon"
                @click="reload">查询
              </el-button>
              <el-button @click="reset">重置</el-button>
              <el-button
                size="small"
                type="success"
                class="ele-btn-icon"
                icon="el-icon-download"
                @click="exportData">导出
              </el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :where="where"
        :datasource="url"
        :columns="columns"
        :selection.sync="selection"
        height="calc(100vh - 315px)">
        <!-- 表头工具栏 -->
        <template slot="toolbar">
        </template>
       </ele-pro-table>
    </el-card>
    
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import XLSX from 'xlsx';

export default {
  name: 'ExamExperienceDetail',
  components: {},
  computed: {
    ...mapGetters(["permission"]),
  },
  created() {
    this.schoolName = this.$route.query.school_name;
    this.where.experience_id = this.$route.query.experience_id;
    this.where.school_id = this.$route.query.school_id;
    this.where.school_name = this.$route.query.school_name;
    console.log(this.where);
    this.getProjects();
    this.reload();
    
  },
  data() {
    return {
      // 表格数据接口
      url: '/experiencescan/detail',
      // 表格列配置
      columns: [
         {
          columnKey: 'index',
          type: 'index',
          width: 45,
          align: 'center',
          showOverflowTooltip: true,
          fixed: "left"
        },
         {
          prop: 'school_name',
          label: '学校名称',
          showOverflowTooltip: true,
          minWidth: 200,
          align: 'center',
        },
        {
          prop: 'project_name',
          label: '项目名称',
          showOverflowTooltip: true,
          minWidth: 200,
          align: 'center',
        },
        {
          prop: 'scan_sum',
          label: '扫码次数',
          showOverflowTooltip: true,
          minWidth: 200,
          align: 'center',
        }
      ],
      // 表格搜索条件
      where: {},
      // 表格选中数据
      selection: [],
      // 当前编辑数据
      current: null,
      // 是否显示编辑弹窗
      showEdit: false,
      schoolName: '',
      projects: []
    };
  },
  methods: {
    /* 刷新表格 */
    reload() {
      this.$refs.table.reload({where: this.where});
    },
    /* 重置搜索 */
    reset() {
      this.where.project_id = null;
      this.reload();
    },
    goBack() {
        console.log('go back');
        this.$router.back();
    },
    getProjects(){
      this.$http
        .post("/project/index", {})
        .then(res => {
          if (res.data.code === 0) {
            this.projects = res.data.data;
           
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch(e => {
          this.$message.error(e.message);
        });
    },
     /* 导出数据 */
    exportData() {
      let array = [['学校名称', '参与项目', '扫码次数']];
      const loading = this.$loading({lock: true});
      this.$http.post('/experiencescan/detail?page=1&limit=2000',this.where).then(res => {
        loading.close();
        if (res.data.code === 0) {
          res.data.data.forEach(d => {
            array.push([
              d.school_name,
              d.project_name,
              d.scan_sum
            ]);
          });
          this.$util.exportSheet(XLSX, array, '项目体验详情_' + this.where.school_name);
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        loading.close();
        this.$message.error(e.message);
      });
    }
  },
  watch: {
    $route() {
        this.where.experience_id = this.$route.query.experience_id;
        this.where.school_id = this.$route.query.school_id;
        this.where.school_name = this.$route.query.school_name;
        console.log(this.where);
        this.reload();
    }
  }
}
</script>

<style scoped>
</style>
